<template>
  <div id="feed-detail" class="max-w-md w-full my-0 mx-a pt-4 pb-24">
    <CoverImage
      :url="feed?.coverImageUrl"
      :userIcon="feed?.userIcon"
      :userName="feed?.userName"
      :width="feed?.width"
      :height="feed?.height"
    />
    <NEllipsis :line-clamp="3" class="pt-4 px-4 font-700 text-4.5 w-full">{{
      feed?.customPrompt
    }}</NEllipsis>
    <ModelList :list="modelList" class="px-4" />
    <UseSpellBtn :loading="loading" @click="handleUse()" />
  </div>
</template>

<script setup lang="ts">
import CoverImage from './CoverImage.vue'
import { useRequest } from 'alova'
import { modelDetailGetter } from '@/service/methods/feed'
import type { ItemOption } from '../home/waterfall/types'
import UseSpellBtn from './UseSpellBtn.vue'
import { useRouter } from 'vue-router'
import Routes from '@/router/routes'
import { NEllipsis } from 'naive-ui'
import ModelList from '@/components/ModelList.vue'
defineOptions({ name: 'FeedDetail' })
const router = useRouter()
const feed = ref<ItemOption>()
const { send: getModelDetail, data: modelList, loading } = useRequest(
  (tags: string[]) => modelDetailGetter(tags),
  {
    initialData: [],
    immediate: false
  }
)
watch(
  () => history.state,
  (state) => {
    try {
      if (!state['feed']) return
      // @ts-ignore
      const newFeed = JSON.parse(state['feed'])
      console.log(newFeed)
      feed.value = newFeed
      if (feed.value && feed.value.tags?.length) getModelDetail(feed.value.tags)
    } catch (error) {
      console.error('feed-detail: ', error)
    }
  },
  { immediate: true }
)
const handleUse = async () => {
  router.push({
    name: Routes.create,
    state: { feed: JSON.stringify(feed.value), modelList: JSON.stringify(modelList.value) }
  })
}
</script>

<style lang="scss" scoped></style>
